<template>
    <section class="content">
        <div class="perosnal-block">
            <aside>
                <Menu :active-name="activename" @on-select="toMenuItem">
                    <MenuItem name="balance"><Icon type="ios-basket-outline" />{{ $t('langObj.accountBalance') }}</MenuItem>
                    <MenuItem name="myInfo"><Icon type="ios-contact-outline"/>{{ $t('langObj.PersonalInfo') }}</MenuItem>
                    <MenuItem name="myCourse"><Icon type="ios-desktop-outline" />{{ $t('langObj.courses') }}</MenuItem>
                    <MenuItem name="myProject"><Icon type="ios-paper-outline" />{{ $t('langObj.projects') }}</MenuItem>
                    <MenuItem name="myCompetition"><Icon type="ios-trophy-outline" />{{ $t('langObj.competitions') }}</MenuItem>
                    <MenuItem name="dataFoundry"><Icon type="ios-cube-outline" />{{ $t('langObj.dataSet') }}</MenuItem>
                    <MenuItem name="myFavorite"><Icon type="ios-bookmark-outline" />{{ $t('langObj.favorite') }}</MenuItem>
                </Menu>
            </aside>
            <article>
                <router-view></router-view>
            </article>
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            activename:''
        }
    },
    methods: {
        toMenuItem(name){
            this.$router.push({name:name})
        }
    },
    mounted() {
        // 刷新时菜单高亮
        this.activename = this.$router.currentRoute.name  ?  this.$router.currentRoute.name : 'balance'
    },
}
</script>
<style lang="scss">
    // 修改ivew源码Menu默认样式
    .perosnal-block aside{
        ul{
            text-align: center;

            li{
                height: 60px;
                line-height: 32px;
                margin-bottom:16px;
            }
        }
    }
</style>


<style lang="scss" scoped>
    .content{
        flex:1;
        min-width: 1200px;
        background-color:#f9fafa;
    }
    .perosnal-block{
        width: 1200px;
        padding: 20px;
        margin: 30px auto;
        background-color: #fff;
        display: flex;

        article{
            flex:1;
            padding-left:40px;
        }
    }
</style>
